<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=0.7; maximum-scale=0.7; minimum-scale=0.7; user-scalable=0" />
<link rel="stylesheet" type="text/css" href="WW.css" />
<title>Word Waffle - How to Play</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style>
.exampleCell {
	float:left;
	border-top:2px solid #8c2100;
	border-left:2px solid #8c2100;
	border-right:2px solid #dec68c;
	border-bottom:2px solid #dec68c;
	background:#F5B800;
	padding:6px 5px 4px 5px;
	text-align:center;
	vertical-align:center;
	height:48px;
	width:48px;
	font-weight: bold;
	font-size: 40px;

}
</style>
</head>
<body>
<div id="page" style="width:100%;text-align:center">
<div id="container" style="text-align:left">
<?php require "banner.htm"; ?>
<h1 style="font-variant:small-caps;text-align:center">How to Play</h1>
<ol>
<li><a class="fakeLink">Joining</a>
<div class="board">
<p>To join, type in a username and password.  If you've never played before, check the "my first time" box
to create the username.  In future games, use the same password you did the first time.  Your game 
statistics will soon be attached to your name.</p>
</div>
</li>

<li><a class="fakeLink">Starting a game</a>
<div class="board">
<p>When all players have joined, press the Start button to begin a new game with all players currently
online.</p>
</div>
</li>

<li><a class="fakeLink">Gameplay</a>
<div class="board">
<p>If the players involved have played together before, the player who scored the least amount of
points the previous game gets to choose first.  Otherwise, the player who joined first gets to choose
the first letter.</p>
<p>The game takes place in two phases for 25 turns.  The first phase is the "choosing" phase, 
in which players take turns choosing a letter of the alphabet.  The second phase is all players 
(including the chooser) must then place that letter in their waffle.  You only get to see your
own waffle until the end of the game.  Once all 25 squares are filled, the game is finished and 
your contained words are tallied and scored.</p>
</div>
</li>

<li><a class="fakeLink">Goal</a>
<div class="board">
<p>The goal of the game is to make more more words and score more points than your opponent(s) 
(or if you're playing alone, more points than your previous best score).</p>
<p>You are awarded points for each English word found in your waffle.</p>
</div>
</li>

<li><a class="fakeLink">Scoring</a>
<div class="board">
<p>Words can be created left-to-right and top-to-bottom.  Only words that are 3 to 5 letters are scored.
Keep in mind that words <span style="font-style:italic">within</span> words count too!</p>
<ul>
<li>5-letter words are worth 10 points.</li>
<li>4-letter words are worth 5 points.</li>
<li>3-letter words are worth 1 point.</li>
</ul>
</div>
</li>

<li><a class="fakeLink">Strategy</a>
<div class="board">
<p>There is no best way to play, but certainly the best way to score points is to create words
<span style="font-style:italic">within</span> words.</p>
<p>For example:</p>

<div class="exampleCell">S</div>
<div class="exampleCell">A</div>
<div class="exampleCell">G</div>
<div class="exampleCell">E</div>
<div class="exampleCell">S</div>

<p style="clear:both">contains: SAGES [10], SAGE [5], AGES [5], SAG [1], AGE [1],
for a total of 22 points in just five letters!</p>
<p>Keep in mind that other players will be using the same 25 letters as you, so catch them off-guard
with an uncommon letter when you have a perfect place for it.</p>
</div>
</li>

<li><a class="fakeLink">Credits</a>
<div class="board">
<p>Invention: Rachael Devlin/Brian Houston</p>
<p>Coding: Brian Houston</p>
</div>
</li>
</ol>
</div>
</div>
<script>
	$("li").click(function(){
		$(this).children("div").toggle(500);
	});
</script>

</body>
</html>